<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="dialogStartProcessVisibleInChild"
    title="发起流程"
    width="800px"
  >
    <div v-if="generateStartFormVisible">
      <fm-generate-form ref="generateStartForm" :data="startFormJson" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-form v-if="showBusinessKey" label-width="100px">
        <el-form-item label="业务主键Key:">
          <el-input v-model="businessKey" placeholder="请输入业务主键Key" />
        </el-form-item>
      </el-form>
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button
        v-permission="['admin', 'instance:add']"
        :loading="submitLoading"
        type="primary"
        @click="doSubmit"
      >确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import crud from '@/mixins/crud'
import crudDefinition from '@/api/flowable/definition'
import crudInstance from '@/api/flowable/instance'

export default {
  name: 'StartProcess',
  components: {},
  mixins: [crud],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    processDefinition: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      submitLoading: false,
      generateStartFormVisible: false,
      startFormJson: undefined,
      showBusinessKey: false,
      businessKey: undefined
    }
  },
  computed: {
    dialogStartProcessVisibleInChild: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      if (this.processDefinition.formKey) {
        crudDefinition.renderedStartForm(this.processDefinition.id)
          .then((res) => {
            const data = res
            this.showBusinessKey = data.showBusinessKey
            if (data.renderedStartForm) {
              this.startFormJson = JSON.parse(data.renderedStartForm)
              this.generateStartFormVisible = true
            }
          })
          .catch(err => {
            console.log(err.response.data.message)
          })
      }
    },
    cancel() {
      this.dialogStartProcessVisibleInChild = false
    },
    doSubmit() {
      this.submitLoading = true
      if (this.$refs.generateStartForm) {
        this.$refs.generateStartForm.getData().then(values => {
          if (values && values !== undefined) {
            const processInstanceFormData = JSON.stringify(values)
            const realValues = Object.assign({ processInstanceFormData }, values)
            crudInstance.start({
              processDefinitionId: this.processDefinition.id,
              businessKey: this.businessKey,
              values: realValues
            }).then(res => {
              this.dialogStartProcessVisibleInChild = false
              this.submitLoading = false
              this.$notify({
                title: '发起成功',
                type: 'success',
                duration: 2500
              })
            })
          }
        }).catch(err => {
          this.submitLoading = false
          console.log('error:' + err.response.data.message)
        })
      } else {
        crudInstance.start({
          processDefinitionId: this.processDefinition.id,
          businessKey: this.businessKey
        }).then(res => {
          this.dialogStartProcessVisibleInChild = false
          this.submitLoading = false
          this.$notify({
            title: '发起成功',
            type: 'success',
            duration: 2500
          })
        })
      }
    }
  }
}
</script>
